<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    // 简单实现computed和watch

    // 公共类
    function defineReactive(data, key, val, fn) {
        let subs = []
        Object.defineProperty(data, key, {
            configurable:true, // 为true时可以进行该属性描述才能进行更改。
            enumerable: true, // 为true时可以进行枚举对象。
            get: function() {
                //新增
                if(data.$target) {
                    subs.push(data.$target)
                }
                return val
            },
            set: function(newVal) {
                if( newVal == val) return
                fn && fn(newVal)
                // 新增
                if(subs.length) {
                    //用setTimout 因为此时 this.data 还没更新
                    setTimeout(() => {
                        subs.forEach(sub => subs())
                    },0)
                }
                val = newVal
            },
        })
    }

    // 实现computed
    function computed(ctx,obj) {
        let keys = Object.keys(obj)
    }

</script>
</html>